<style scoped>
  .weui-form-preview {
    margin: 5px;
    border-radius: 5px;
  }
  .rj-cell-child.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell-child label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell-child span {
    padding-left: 20px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell-child .tip {
    font-size: 16px;
    color: #333;
  }
  .rj-cell-child i {
    font-size: 18px;
    font-style: normal;
    color: #333;
  }
  .weui-form-preview__ft .weui-form-preview {
    background: #f5f5ef;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui-panel__bd {
    text-align: left;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tit label, .tit span {
    font-size: 16px;
  }
  .tit label {
    padding-right: 20px;
  }
  .weui-panel.weui-panel_access {
    padding-bottom: 10px;
  }
  .weui-panel__bd:not(.base) {
    width: 98%;
    padding: 0 1% 2px 1%;
  }
  .rj-cont-tit:not(.base) {
    border-radius: 5px;
  }
  .weui-cells__title {
    text-align: left;
    background: #eee;
  }
  #acts span {
    font-size: 14px;
  }
  .weui-media-box {
    text-align: left;
  }
</style>
<template>
  <div class="comon">
    <div class="rj-wrap">
<!--      <div class="logsbtn" @click="openLogs"><img src="@/assets/icon-history.png" style="width: 20px" /></div>-->
      {{titleName}}
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd base">
        <div class="weui-form-preview billitem rj-cont-tit base">
          <div class="rj-cell max">
            <label>编号：</label>
            <span>{{transferapply.code}}</span>
          </div>
          <div class="rj-cell max">
            <label>{{transferapply.type == 1 ? '公司名' : '库存组织'}}：</label>
            <span>{{transferapply.orgname}}</span>
          </div>
          <div class="rj-cell max" v-if="transferapply.type == 1">
            <label>部门：</label>
            <span>{{transferapply.departname}}</span>
          </div>
          <br/>
          <!--          <div class="rj-cell max" >-->
          <!--            <label>物流平台运单号：</label>-->
          <!--            <span>{{transferapply.wlcode}}</span>-->
          <!--          </div>-->
          <div class="rj-cell max">
            <label> <template v-if="transferapply.type == 1" >调出</template>库房：</label>
            <span>{{transferapply.fromsrname}}</span>
          </div>
          <div class="rj-cell max"  v-if="transferapply.type == 1">
            <label>调入库房：</label>
            <span>{{transferapply.tosrname}}</span>
          </div>
          <div class="rj-cell max"  v-if="transferapply.type == 1">
            <label>入库公司：</label>
            <span>{{transferapply.toorgname}}</span>
          </div>
          <div class="rj-cell max"  v-if="transferapply.type == 2 ||transferapply.type == 3">
            <label>调整类型：</label>
            <span>{{typename(transferapply.type)}}</span>
          </div>
          <div class="rj-cell max">
            <label><template  v-if="transferapply.type == 2 || transferapply.type == 3">调整</template><template  v-if="transferapply.type == 1">调拨</template>重量：</label>
            <span>{{transferapply.shiftweight}} 吨</span>
          </div>
          <div class="rj-cell max">
            <label>状态：</label>
            <span>{{statusname(transferapply.status)}}</span>
          </div>
          <br/>
          <div class="rj-cell max">
            <label>备注：</label>
            <span>{{transferapply.remark}}</span>
          </div>

          <br/>
          <div class="rj-cell max"  >
            <label>提交人：</label>
            <span>{{transferapply.applyname}}</span>
          </div>
          <div class="rj-cell max"  >
            <label>提交时间：</label>
            <span>{{transferapply.createtime}}</span>
          </div>
          <div style="overflow:auto;overflow-x: hidden;  " v-show="transferapply.carcode != ''" >
            <div class="weui-cells__title">货运信息</div>
            <div class="rj-cell max">
              <label>货运要求：</label>
              <span>{{transferapply.freightclaim}}</span>
            </div>
            <div class="rj-cell max">
              <label>物流公司：</label>
              <span>{{transferapply.wlcompany}}</span>
            </div>
            <div class="rj-cell max">
              <label>司机姓名：</label>
              <span>{{transferapply.drivername}}</span>
            </div>
            <div class="rj-cell max">
              <label>司机电话：</label>
              <span>{{transferapply.driverphone}}</span>
            </div> <div class="rj-cell max">
            <label>车牌号：</label>
            <span>{{transferapply.carcode}}</span>
          </div>
          </div>
          <div style="overflow:auto;overflow-x: hidden; "  v-show="transferapply.delicontact != ''">
            <div class="weui-cells__title">发货信息</div>
            <div class="rj-cell max">
              <label>联系人：</label>
              <span>{{transferapply.delicontact}}</span>
            </div>
            <div class="rj-cell max">
              <label>联系人电话：</label>
              <span>{{transferapply.delicontactno}}</span>
            </div>
            <br/>
            <div class="rj-cell max">
              <label>发货时间：</label>
              <span>{{transferapply.loadtime}}</span>
            </div>
            <div class="rj-cell max">
              <label>发货总重量：</label>
              <span>{{transferapply.loadweight}}</span>
            </div>
            <br/>
            <div class="rj-cell max">
              <label>省：</label>
              <span>{{transferapply.deliprovince}}</span>
            </div>
            <div class="rj-cell max">
              <label>市：</label>
              <span>{{transferapply.delicity}}</span>
            </div>
            <div class="rj-cell max" >
              <label>区：</label>
              <span>{{transferapply.delidistrict}}</span>
            </div>

            <div class="rj-cell max" >
              <label>详细地址：</label>
              <span>{{transferapply.deliaddress}}</span>
            </div>
          </div>
          <div style="overflow:auto;overflow-x: hidden;  " v-show="false">
            <div class="weui-cells__title">到货信息</div>
            <div class="rj-cell max">
              <label>到货时间：</label>
              <span>{{transferapply.unloadtime}}</span>
            </div>
            <div class="rj-cell max">
              <label>到货总重量：</label>
              <span>{{transferapply.unloadweight}}</span>
            </div>
            <br/>
            <div class="rj-cell max">
              <label>省：</label>
              <span>{{transferapply.arriprovince}}</span>
            </div>
            <div class="rj-cell max">
              <label>市：</label>
              <span>{{transferapply.arricity}}</span>
            </div>
            <div class="rj-cell max">
              <label>区：</label>
              <span>{{transferapply.arridistrict}}</span>
            </div>

            <div class="rj-cell max">
              <label>详细地址：</label>
              <span>{{transferapply.arriaddress}}</span>
            </div>
          </div>
        </div>
        <div class="weui-panel__bd"  v-for="(product, index) in transferapply.items"    ref="qaform"  >
          <div class="weui-cells__title" style="height: 10px;line-height: 10px"> 货品明细 {{index +1}} </div>
          <div class="weui-form-preview billitem rj-cont-tit">
            <div style="border-top: 1px solid #eee;">
              <div class="rj-cell max"  >
                <label>
                <template v-if="transferapply.type == 1">出库</template>库间：</label>
                <span>
                  {{product.fromshname}}<span v-if="product.shiftweight != ''"> &nbsp;&nbsp;<label>数量：</label>{{product.shiftweight}} {{product.stockunit}}</span>
                </span>
              </div>
              <div class="rj-cell max" v-if="( transferapply.type == 1)">
                <label>入库库间：</label>
                <span>{{product.toshname}}<span v-if="product.unloadweight != ''">&nbsp;<label>数量：</label>{{product.unloadweight}} {{product.stockunit}}</span>
                </span>
              </div>
              <div class="rj-cell max">
                <label>货品类型：</label><span>{{product.typename}}</span>
              </div>

              <div class="rj-cell max">
                <label>产&nbsp;&nbsp;&nbsp;品：</label><span>{{product.product}}</span> <span>{{product.spname}} </span>
              </div>
              <div class="rj-cell max" v-if="product.interSettlPrice">
                <label>内部价格：</label><span>{{product.interSettlPrice}} {{'元/' + product.stockunit}}</span>
              </div>
              <div class="rj-cell max">
                <label>备&nbsp;&nbsp;&nbsp;注：</label><span>{{product.remark}} </span >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__bd"     ref="qaform" v-if="qaform.qacode != '' && qaform.qacode != null">
        <div class="weui-cells__title" style="height: 10px;line-height: 10px">质检信息</div>
        <div class="weui-form-preview billitem rj-cont-tit">

          <div    style="border-top: 1px solid #eee;">
            <div  >
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>
                <span>{{qaform.qacode}}</span>

              </div>
            </div>
            <div class="rj-cell max">
              <label>抽检数量：</label>
              <span>{{qaform.chkpknum}} 包</span>
              <span> {{qaform.chkwght}} Kg</span>

              <label>合格重量：</label>
              <span> {{qaform.okweight}} Kg</span>
            </div>
            <div class="rj-cell max">
              <label>不合格重量：</label>
              <span> {{qaform.notokweight}} Kg</span>
              <label>不合格率：</label>
              <span> {{qaform.unqualifiedchkrate}}%</span>
            </div>
            <div class="rj-cell max">
              <label>土杂重量：</label>
              <span> {{qaform.soilchkweight}} Kg</span>
              <label>土杂率：</label>
              <span> {{qaform.soilchkrate}}%</span>
            </div>
            <br>
            <div class="rj-cell max">
              <label>合格率：</label>
              <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>
            </div>

            <div class="rj-cell max">
              <label>质检人：</label>
              <span>{{qaform.operatorname}}</span>
              <label>质检时间：</label>
              <span>{{qaform.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">质检单照片</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in qaFormImg" :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="weui-panel__bd"     ref="qaform"  v-if="whoutform != null && whoutform != ''">
        <div class="weui-cells__title" style="height: 10px;line-height: 10px">出库单信息</div>
        <div class="weui-form-preview billitem rj-cont-tit"  v-for="(outObj, index) in whoutform">
          <div    style="border-top: 1px solid #eee;">
            <div  >
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">出库单编号：</span></label>
                <span>{{outObj.whoutcode}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>库房：</label>
              <span>{{outObj.storeroom}} </span>
<!--              <label>重量：</label>-->
<!--              <span> {{outObj.weight}} 吨</span>-->
            </div>

            <div class="rj-cell max">
              <label>操作人：</label>
              <span>{{outObj.operator}}</span>

              <label>出库时间：</label>
              <span>{{outObj.createtime}}</span>
            </div>

            <div class="weui-panel__bd"  v-for="(product, index) in outObj.items"      >
              <div class="weui-cells__title" style="height: auto;"> 出库单明细 {{index +1}} </div>
              <div >
                <div style="border-top: 0px solid #eee;">
                  <div class="rj-cell max"  >
                    <label> 出库库间：</label>
                    <span>{{product.house}} </span>
                  </div>
                  <div class="rj-cell max"  >
                    <label> 产品：</label>
                    <span>{{product.product}} </span>

                    <span>{{product.spename}} </span>

                    <span>{{product.weight}} {{product.stockunit}}</span>
                  </div>


                </div>
              </div>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="outObj.imgs != undefined && outObj.imgs.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">出库单单据</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in outObj.imgs " :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="weui-panel__bd"     ref="qaform"  v-if="whinform != '' && whinform != null ">
        <div class="weui-cells__title" style="height: 10px;line-height: 10px">入库单信息</div>
        <div class="weui-form-preview billitem rj-cont-tit"  v-for="(outObj, index) in whinform">
          <div    style="border-top: 0px solid #eee;">
            <div  >
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">入库单编号：</span></label>
                <span>{{outObj.formno}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>库房：</label>
              <span>{{outObj.strname}} </span>
            </div>

            <div class="rj-cell max">
              <label>操作人：</label>
              <span>{{outObj.operator}}</span>

              <label>出库时间：</label>
              <span>{{outObj.createdate}}</span>
            </div>

            <div class="weui-panel__bd"  v-for="(product, index) in outObj.items"      >
              <div class="weui-cells__title" style="height: auto;"> 入库单明细 {{index +1}} </div>
              <div >
                <div style="border-top: 0px solid #eee;">
                  <div class="rj-cell max"  >
                    <label> 出库库间：</label>
                    <span>{{product.house}} </span>

                  </div>
                  <div class="rj-cell max"  >
                    <label> 产品：</label>
                    <span>{{product.product}} </span>

                    <span>{{product.spename}} </span>

                    <span>{{product.weight}} {{product.stockunit}}</span>
                  </div>


                </div>
              </div>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="outObj.images != undefined && outObj.images.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">入库单单据</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in outObj.images " :key="image.guid"  alt="" onerror="javascript:this.src='../../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <TransOperationLogs2 v-if="transferapply.type == 1" :orderid="id" :srguid="transferapply.fromsrguid" :tosrguid="transferapply.tosrguid" :departid="transferapply.departid"></TransOperationLogs2>
      <OperationLogs2 v-if="transferapply.type != 1" :orderid="id" :srguid="transferapply.status <= 15 ? transferapply.fromsrguid : transferapply.tosrguid" :departid="transferapply.departid"></OperationLogs2>
    </div>
  </div>
</template>

<script>
  import OperationLogs2 from '../../common/OperationLogs2'
  import TransOperationLogs2 from '../../common/TransOperationLogs2'
    export default {
        name: 'ViewTransferapply',
        data () {
            return {
                openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
                userid: localStorage.userid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
                id: '',
                transferapply: {},
                qaform:{},
                qaFormImg:[],
                titleName:"",
                whoutform:[],
                whinform:[],
            }
        },
      components: {
        OperationLogs2,
        TransOperationLogs2
      },
        created() {
            window.addEventListener('setItem', ()=> {
                this.openid = localStorage.getItem('openid');
                this.userid = localStorage.getItem('userid');
            })
        },
        mounted () {

            this.id = this.$route.query.id;
            // this.id = "11111111111"
            this.getScrap(this.id);

            //图片浏览器
            $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
                var num = $(this).parent().children().not( ".exp" ).length;
                var imgArr = [];
                for (var i=0; i<num; i++) {
                    imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
                }
                var pnum = $(this).parent().find('.exp').length;
                var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
                var pb = $.photoBrowser({
                    items: imgArr,
                    initIndex: index
                });
                pb.open();
            });

        },
        methods: {
            scrapwhy: function(type) {
                if (type == 1) {
                    return '腐烂报废';
                } else if (type == 2) {
                    return '库损';
                } else {
                    return '';
                }
            },
            typename: function(type) {
                let name = '';
                switch (type) {
                    case 1:
                        name = '库房调拨';
                        break;
                    case 2:
                        name = '调整出库';
                        break;
                    case 3:
                        name = '调整入库';
                        break;
                }
                return name;
            },
            itemTypeName: function(type) {
                let name = '';
                switch (type) {
                    case 1:
                        name = '原料';
                        break;
                    case 2:
                        name = '成品';
                        break;
                    case 3:
                        name = '次品';
                        break;
                }
                return name;
            },
            getTitleName: function(type) {
                //type 1-库房调拨  2，3-库存调整
                switch (type) {
                    case 1:
                        this.titleName = '库房调拨详情';
                        break;
                    default :
                        this.titleName = '库存调整详情';
                        break;
                }
                return name;
            },
            farestatusname: function(farestatus) {
                let name = '';
                switch (farestatus) {
                    case 1:
                        name = '已结算';
                        break;
                    case 2:
                        name = '未结算';
                        break;
                }
                return name;
            },
            farepricetypename: function(farepricetype) {
                let name = '';
                switch (farepricetype) {
                    case 1:
                        name = '按车';
                        break;
                    case 2:
                        name = '按吨';
                        break;
                }
                return name;
            },
            statusname: function(status) {
                let name = '';
                switch (status) {
                    case 1:
                        name = '待审批';
                        break;
                    case 5:
                        name = '出库质检';
                        break;
                    case 10:
                        name = '待出库';
                        break;
                    case 11:
                        name = '已出库';
                        break;
                    case 15:
                        name = '运输中';
                        break;
                    case 16:
                        name = '到货';
                        break;
                    case 20:
                        name = '入库质检';
                        break;
                    case 25:
                        name = '待入库';
                        break;
                    case 30:
                        name = '结束';
                        break;
                    case 0:
                        name = '作废';
                        break;
                }
                return name;
            },
            getScrap: function (id) {
                this.axios({
                    method: 'get',
                    url: '/produce/Transferapply!detail.action',
                    params: {applyid: id}
                }).then(response => {
                    if (response.data.msg == 'success') {
                        let data = response.data;
                        this.transferapply = data.apply;
                        this.getTitleName(this.transferapply.type);
                        this.whoutform = data.whoutform;
                        this.whinform = data.whinform;
                        if(data.qaforms != undefined){
                            this.qaform = data.qaforms;
                            this.qaFormImg = data.qaFormImg;

                        }
                    } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
          //不不设置提示
        } else {
          this.toastError('系统错误');
        }
                });
            },
          openLogs: function() {
            this.$router.push({name: 'OperationLogs2', query: {orderid: this.id, srguid: this.transferapply.status <= 15 ? this.transferapply.fromsrguid : this.transferapply.tosrguid, departid: ''}});
          }
        }
    }
</script>
